<template>
	<view class="background">
		<view class="flex-row justify-between items-center head-info">
			<view class="items-center"><image src="./images/clock.png" mode="aspectFit"/></view>
			<view class="items-center" @tap="open"><image src="./images/submit.png" mode="aspectFit" style="width: 70rpx;height:80rpx;"></image></view>
		</view>
		<!-- 滑动页面区域 -->
		<view class="slide-area" :key="index"
		v-for="(item,index) in topic" v-if="index==nth || newIndex==index" 
		@touchstart="touchStart" @touchend="touchEnd($event,index)"
		:class="upOrDown=='up'?'toRight':'toLeft'">
		<!-- :animation="animationData"> -->
			<exam-item :examItem="item" @answ="answ" :total="total" :current="current" :currentType="currentType" :oneAnswer="oneAnswer"></exam-item>
		</view>
		<PopupAnswCard ref="popupAnswCard" :topic="topic" :paperAnsw="paperAnsw" :questionList="quesMainList"
		@intoQues="intoQues"></PopupAnswCard>
	</view>
</template>

<script>
	import ExamItem from './components/exam-item.vue'
	import PopupAnswCard from './components/popup-answ-card.vue'
	export default{
		components:{
			ExamItem,
			PopupAnswCard
		},
		data() {
			return {
				startX: 0, // 滑动开始x轴位置
				moveX: 0, // 滑动的x轴距离
				nth: 0, // 当前第几题（以下标计算）
				newIndex: 0, // 滑动到第几题（以下标计算）
				topic: [],
				animation:'',
				animationData: {} ,// 动画
				questionJson:[],
				currentIndex:0,
				coverIndex:[],
				currentType:'',
				width:0,
				SystemInfo:'',
				upOrDown:'down',
				paperAnsw:[],
				quesMainList:[]
			}
		},
		computed:{
			total(){
				return this.topic.length-this.coverIndex.length
			},
			current(){
				const inx = this.coverIndex.filter(cv=>this.newIndex==cv)
				if(inx.length>0){
					this.currentType = this.topic[inx].name
				}
				
				const arr = this.coverIndex.filter(cv=>this.newIndex>cv)
				if(arr.length!=0){
					return this.newIndex+1-arr.length
				}else{
					return 0
				}
			},
			oneAnswer(){
				if(this.paperAnsw.length>0){
					if(this.paperAnsw[this.current]){
						console.log(this.paperAnsw[this.current],'oneAnswer-------')
						return this.paperAnsw[this.current]
					}
				}
				return {}
			}
		},
		async onLoad(option) {
		    // 创建动画实例
		    this.animation = uni.createAnimation({ timingFunction: 'ease', duration: 100 })
			this.getListData(option.id)
			this.SystemInfo = await this.getSystemInfo();
			this.$nextTick(() => {
				this.width = this.SystemInfo.windowWidth 
			})
			
		},
		methods: {
			// 获取设备信息
			getSystemInfo(){
				return new Promise((req, rej) => {
					uni.getSystemInfo({
					    success: function (res) {
					        req(res)
					    }
					});
				})
			},
			touchStart(e) { // 手指触摸屏幕时触发，有一个手指放在屏幕上也会触发
				// 获取触摸时的原点
				this.startX = e.changedTouches[0].pageX // 触摸目标在页面中的X坐标
				//console.log('开始触摸：', this.startX);
			},
			touchEnd(e,index) { // 手指离开屏幕时触发
				// 获取滑动距离
				const moveX = e.changedTouches[0].pageX - this.startX
				// 判断滑动方向
				if (moveX < -100 && index<this.topic.length-1) { // 下一题 判断大幅度左滑且不是最后一题
					
					this.downOne()
				}
				else if (moveX > 100 && index!= 0) { // 上一题 判断大幅度右滑且不是第一题
					
					this.upOne()
				}
			},
			downOne(){
				this.upOrDown = 'down'
				this.newIndex=this.newIndex+1
				this.nth= this.nth+1
			},
			upOne(){
				this.upOrDown = 'up'
				this.newIndex=this.newIndex-1
				this.nth= this.nth-1
			},
			intoQues(tpNum,quesNum){
				//console.log(tpNum,quesNum,'intoQues------')
				this.newIndex=tpNum
				this.nth= tpNum
			},
			answ(rs){
				this.handlerArr(rs)
				if(this.newIndex<this.topic.length-1){
					this.downOne()
				}else{
					uni.showToast({
						title:'这是最后一题了',
						icon:'error'
					})
				}
			},
			handlerArr(rs){
				this.$set(this.paperAnsw, rs.key,  rs)
				console.log('答题结果是：',rs,this.paperAnsw)
			},
			open(){
				this.$refs.popupAnswCard.$refs.popup.open('bottom')
				//最后一题正好是多选情况
				// if(this.current==this.quesMainList.length){
				// 	this.multipueSub()
				//}
			},
			getListData(id){
				//模拟api请求
				this.topic = [
					{
						name:'题目',
						request:'答案无对错之分，我们会根据你的回答智能推荐合适的搭子，请耐心作答。',
						cover:true
					},
					  
					    {  
					        id: 1,  
					        type: 0,  
					        topic: '题目1：你更喜欢在社交场合中：',
					        optionJson: [  
					            "与人交谈",  
					            "观察周围的人群",  
					            "找个角落独自思考",  
					            "参与活动但不喜欢引人注目"  
					        ]  
					    },  
					    {  
					        id: 2,  
					        type: 0,  
					        topic: "题目2：你更倾向于：",  
					        optionJson:[  
					            "按照计划进行",  
					            "灵活应变",  
					            "喜欢有结构",  
					            "喜欢随性"  
					        ]  
					    },  
					    {  
					        id: 3,  
					        type: 0,  
					        topic: "题目3：你如何处理压力：",  
					        optionJson: [  
					            "寻求他人支持",  
					            "独自思考解决",  
					            "寻找娱乐放松",  
					            "积极行动解决问题"  
					        ]  
					    },  
					    {  
					        id: 4,  
					        type: 0,  
					        topic: "题目4：你更喜欢：",  
					        optionJson: [  
					            "计划好未来",  
					            "活在当下",  
					            "回顾过去经验",  
					            "探索未知可能性"  
					        ]  
					    },  
					    {  
					        id: 5,  
					        type: 0,  
					        topic: "题目5：在团队中，你更倾向于：",  
					        optionJson: [  
					            "领导团队",  
					            "执行任务",  
					            "提出创意",  
					            "协调团队关系"  
					        ]  
					    },  
					    {  
					        id: 6,  
					        type: 0,  
					        topic: "题目6：你更喜欢：",  
					        optionJson: [  
					            "规划细节",  
					            "看到整体图景",  
					            "关注细节",  
					            "把握大局"  
					        ]  
					    },  
					    {  
					        id: 7,  
					        type: 0,  
					        topic: "题目7：在决策时，你更看重：",  
					        optionJson: [  
					            "逻辑分析",  
					            "感受直觉",  
					            "他人意见",  
					            "实际经验"  
					        ]  
					    },  
					    {  
					        id: 8,  
					        type: 0,  
					        topic: "题目8：当面临冲突时，你更倾向于：",  
					        optionJson: [  
					            "保持冷静",  
					            "寻求解决方案",  
					            "表达情感",  
					            "避免冲突"  
					        ]  
					    },  
					    {  
					        id: 9,  
					        type: 0,  
					        topic: "题目9：你更喜欢：",  
					        optionJson: [  
					            "稳定有序",  
					            "灵活多变",  
					            "独立自主",  
					            "合作共赢"  
					        ]  
					    },  
					    {  
					        id: 10,  
					        type: 0,  
					        topic: "题目10：你更看重：",  
					        optionJson: [  
					            "事实数据",  
					            "潜在可能性",  
					            "情感价值",  
					            "道德原则"  
					        ]  
					    },  
					    {  
					        id: 11,  
					        type: 0,  
					        topic: "题目11：你更倾向于：",  
					        optionJson: [  
					            "计划安排",  
					            "即兴发挥",  
					            "有序安排",  
					            "随心所欲"  
					        ]  
					    },  
					    {  
					        id: 12,  
					        type: 0,  
					        topic: "题目12：你更喜欢：",  
					        optionJson: [  
					            "传统稳定",  
					            "新奇刺激",  
					            "可靠安全",  
					            "多元开放"  
					        ]  
					    },  
					    {  
					        id: 13,  
					        type: 0,  
					        topic: "题目13：在社交中，你更注重：",  
					        optionJson: [  
					            "深入交流",  
					            "轻松愉快",  
					            "理性讨论",  
					            "和谐氛围"  
					        ]  
					    },  
					    {  
					        id: 14,  
					        type: 0,  
					        topic: "题目14：你更倾向于：",  
					        optionJson: [  
					            "逻辑推理",  
					            "直觉感知",  
					            "实际经验",  
					            "个人信念"  
					        ]  
					    },  
					    {  
					        id: 15,  
					        type: 0,  
					        topic: "题目15：你更喜欢：",  
					        optionJson: [  
					            "计划安排",  
					            "随遇而安",  
					            "有序安排",  
					            "随心所欲"  
					        ]  
					    }  
					]
				
				
				if(this.topic.length>0){
					this.currentType = this.topic[0].name
				}
				this.topic.forEach((t,index)=>{
					if(t.cover){
						this.coverIndex.push(index)
					}else{
						this.quesMainList.push(t)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.background{
		background-color: #fff;
		width: 100vw;
		min-height: 100vh;
		padding-top: 1rpx;
		box-sizing: border-box;
		
		.head-info{
			background-color: #f7f7f7;
			box-sizing: border-box;
			padding: 20rpx 40rpx;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.items-center{
				display: flex;
				align-items: center;
			}
			
			image{
				width: 60rpx;
				height: 60rpx;
			}
			.head-current{
				font-size: 40rpx;
				color: #333333;
				text-align: right;
				font-weight: 500;
			}
			.head-total{
				font-size: 28rpx;
				color: #C4C8D8;
				font-weight: 300;
			}
			
			.ques-type{
				height: 17px;
				background: rgba(87,118,243,0.10);
				border-radius: 85px;
			}
		}
		
		.slide-area{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.topic-box{
				width: 80%;
				height: 900rpx;
				background-color: #fff;
				border: 10rpx solid black;
			}
		}
	}
	
	@keyframes toRight {
	// 0% { opacity: 1; transform:translateX(100%)}
	// 50%{ opacity: 1; transform:translateX(0)}
	// 100%{ opacity: 1; transform:translateX(0)}
	  0% { opacity: 1; transform:translateX(-100%)}
	  50%{ opacity: 1; transform:translateX(0)}
	  100%{ opacity: 1; transform:translateX(0)}
	}
	.toRight {
	  animation-name: toRight;
	  animation-duration: 1.3s;
	  animation-timing-function: ease-in-out;
	}
	
	@keyframes toLeft {
		0% { opacity: 1; transform:translateX(100%)}
		50%{ opacity: 1; transform:translateX(0)}
		100%{ opacity: 1; transform:translateX(0)}
	}
	.toLeft {
	  animation-name: toLeft;
	  animation-duration: 1.3s;
	  animation-timing-function: ease-in-out;
	}
</style>